Traditioneel event registratie model
Het nadeel aan de iline eventregistratie bestaat erin dat dat de event-handlers in de HTML-tag ingebed zijn en je dus een mengeling hebt van logische programmacode in Javascript en inhoud van je document HTML. Het was bij de introductie van het traditioneel event registratie model de beodeling dit euvel te verhelpen.
In het tradioneel model kan je events volledig implementeren in Javascript: je voegt geen JavaScript code aan HTML-tags. In dit event-model zijn events zoals onclick, onmouseover, onfocus, ... attributen of eigenschappen van DOM objecten.
Beschrijving
Merk op dat je de functie koppelt aan de event-handler zonder haakjes na de naam van de functie. Met haakjes wordt het resultaat van de functie gekoppeld aan het event in plaats van de functie zelf.
Voorbeeld
In het volgende voorbeeld worden de kopteksten veranderd in een link wanneer de HTML volledige geladen is.
In de methdoe makeEventHeaders gebruiken we het traditioneel event registratiemodel om het onclick event van een kolomkop te ondervangen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jommeke</title>
<script>
// traditionele eventafhandelaar
window.onload = function() {
makeEventHeaders();
}
let makeClickableHeaders = function() {
let tableElem = document.querySelector('#jommeke-boeken');
let headings = tableElem.tHead.rows[0].cells;
for (let i=0; i < headings.length; i++) {
let header = headings[i].innerHTML;
let anchorElem = document.createElement('A');
anchorElem.href = '#';
anchorElem.className = 'asc';
anchorElem.innerHTML = header;
headings[i].innerHTML = '';
headings[i].appendChild(anchorElem);
}
}
let makeEventHeaders = function() {
let tableElem = document.querySelector('#jommeke-boeken');
let headings = tableElem.tHead.rows[0].cells;
for (let i=0; i < headings.length; i++) {
let header = headings[i].innerHTML;
// in de eventafhandelaar plaatsen we een
// closure om de waarde van header te bewaren
// tot op het moment dat de functie wordt uitgevoerd
// wanneer er op de header van de tabel
// wordt geklikt.
// Je kan dus de variabele header niet als
// argument aan de functie doorgeven.
headings[i].onclick = function() {
alert( `Je hebt op ${header} geklikt.`);
}
}
}
</script>
</head>
<body>
<table id="jommeke-boeken" class="spreadsheet">
<caption>Boeken van Jommeke</caption>
<thead>
<tr>
<th scope="col">Nummer</th>
<th scope="col">Titel</th>
<th scope="col">Kaft</th>
<th scope="col">€</th>
<th scope="col">¥</th>
<th scope="col">£</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Jacht op een voetbal</td>
<td>Softcover</td>
<td>5,22</td>
<td>34</td>
<td>3,76</td>
</tr>
<tr>
<th scope="row">2</th>
<td>De zingende aap</td>
<td>Softcover</td>
<td>5,22</td>
<td>34</td>
<td>3,76</td>
</tr>
<tr>
<th scope="row">3</th>
<td>De Koningin van Onderland</td>
<td>Hardcover</td>
<td>8,22</td>
<td>54,1</td>
<td>5,91</td>
</tr>
</tbody>
</table>
</body>
</html>